<template>
	<scroll-view class="main" :scroll-y="true" :lower-threshold="100" @scrolltolower="scrolltolowerHandle">
		<view class="notes-list">
			<view class="notes-item" v-for="(n, i) in NotesList" :key="n.id">
				<view class="">
					<image class="item-image" :src="n.img_url + '?imageView2/2/w/320'" mode="widthFix"></image>
					<view class="item-text">
						{{n.content}}
					</view>
					<view class="item-bottom">
						<view class="item-author">
							{{n.user.user_name}}
						</view>
						<view class="item-info">
							{{n.input_date.slice(0,10)}}
							<text v-show="n.addr"> · {{n.addr}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="100" bgColor="#efefef"></u-gap>
	</scroll-view>
</template>

<script>
	import {
		http
	} from '../../untils/http.js'
	import LoadingBar from '../LoadingBar.vue'
	
	const url = 'diary/square/more/0'
	
	export default {
		name:"SmallNotes",
		data() {
			return {
				NotesList: [],
				loading: false
			};
		},
		created() {
			http(url).then(res => {
				// console.log(res);
				this.NotesList = res.data.list
				console.log(this.NotesList);
			})
		},
		methods: {
			// scrolltolowerHandle() {
			// 	if(!this.loading) {
			// 		console.log('滑到底部');
			// 	}
			// }
		}
	}
</script>

<style lang="scss">
	.main {
		background-color: #efefef;
	}
	
	.notes-list {
		column-count: 2;
		column-gap: 0;
	}
	
	.notes-item {
		margin-left: 8px;
		margin-bottom: 10px;
		width: 345rpx;
		overflow: hidden;
		background-color: #fff;
		border-radius: 5px;
		break-inside: avoid;
	}
	
	.item-image {
		width: 100%;
	}
	
	.item-text {
		padding: 10px;
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.item-bottom {
		padding: 10px;
		font-size: 10px;
		color: #9c9c9c;
	}
</style>